<template>
	<page-layout title="消息" :show-back="true" @back="goBack">
		<!-- 消息类型选项卡 -->
		<view class="tabs" :style="styleVar">
			<view 
				class="tab-item" 
				v-for="(tab, index) in tabs" 
				:key="index"
				:class="{ active: currentTab === index }"
				@tap="switchTab(index)"
			>
				<text class="tab-text">{{ tab.name }}</text>
				<view class="badge" v-if="tab.unread">{{ tab.unread > 99 ? '99+' : tab.unread }}</view>
			</view>
		</view>
		
		<!-- 消息内容区 -->
		<swiper class="message-swiper" :current="currentTab" @change="swiperChange" :style="styleVar">
			<!-- 通知 -->
			<swiper-item>
				<scroll-view scroll-y="true" class="message-list" @scrolltolower="loadMoreNotifications" :style="styleVar">
					<view class="top-actions">
						<view class="mark-read" @tap="markAllRead">全部已读</view>
					</view>
					
					<view v-if="notifications.length === 0" class="empty-container">
						<image src="/static/empty-message.png" mode="aspectFit"></image>
						<text>暂无通知消息</text>
					</view>
					
					<view v-else class="message-items">
						<view 
							class="message-item" 
							v-for="(item, index) in notifications" 
							:key="index"
							:class="{ unread: !item.isRead }"
							@tap="readNotification(item, index)"
						>
							<view class="notification-icon">
								<uni-icons :type="getIconType(item.type)" size="24" color="#2979ff"></uni-icons>
							</view>
							<view class="message-content">
								<view class="message-header">
									<text class="message-title">{{ item.title }}</text>
									<text class="message-time">{{ item.time }}</text>
								</view>
								<text class="message-text">{{ item.content }}</text>
							</view>
						</view>
						
						<view class="list-footer">
							<text v-if="notificationLoading">加载中...</text>
							<text v-else-if="!hasMoreNotifications">没有更多通知了</text>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			
			<!-- 评论 -->
			<swiper-item>
				<scroll-view scroll-y="true" class="message-list" :style="styleVar">
					<view v-if="comments.length === 0" class="empty-container">
						<image src="/static/empty-message.png" mode="aspectFit"></image>
						<text>暂无评论消息</text>
					</view>
					
					<view v-else class="message-items">
						<view 
							class="message-item comment-item" 
							v-for="(item, index) in comments" 
							:key="index"
							:class="{ unread: !item.isRead }"
							@tap="viewCommentDetail(item)"
						>
							<image class="user-avatar" :src="item.userAvatar" mode="aspectFill"></image>
							<view class="message-content">
								<view class="message-header">
									<view class="user-info">
										<text class="user-name">{{ item.userName }}</text>
										<text class="comment-action">{{ item.isReply ? '回复了你的评论' : '评论了你的帖子' }}</text>
									</view>
									<text class="message-time">{{ item.time }}</text>
								</view>
								<text class="comment-text">{{ item.content }}</text>
								<view class="post-preview">
									<text class="post-title">{{ item.postTitle }}</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			
			<!-- 点赞 -->
			<swiper-item>
				<scroll-view scroll-y="true" class="message-list" :style="styleVar">
					<view v-if="likes.length === 0" class="empty-container">
						<image src="/static/empty-message.png" mode="aspectFit"></image>
						<text>暂无点赞消息</text>
					</view>
					
					<view v-else class="message-items">
						<view 
							class="message-item like-item" 
							v-for="(item, index) in likes" 
							:key="index"
							:class="{ unread: !item.isRead }"
							@tap="viewLikeDetail(item)"
						>
							<image class="user-avatar" :src="item.userAvatar" mode="aspectFill"></image>
							<view class="message-content">
								<view class="message-header">
									<view class="user-info">
										<text class="user-name">{{ item.userName }}</text>
										<text class="like-action">{{ getLikeActionText(item.likeType) }}</text>
									</view>
									<text class="message-time">{{ item.time }}</text>
								</view>
								<view class="post-preview">
									<text class="post-title">{{ item.postTitle }}</text>
								</view>
							</view>
							<view class="content-preview" v-if="item.contentPreview">
								<image 
									v-if="item.contentType === 'image'" 
									:src="item.contentPreview" 
									mode="aspectFill"
									class="preview-image"
								></image>
								<text v-else class="preview-text">{{ item.contentPreview }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			
			<!-- 关注 -->
			<swiper-item>
				<scroll-view scroll-y="true" class="message-list" :style="styleVar">
					<view v-if="follows.length === 0" class="empty-container">
						<image src="/static/empty-message.png" mode="aspectFit"></image>
						<text>暂无关注消息</text>
					</view>
					
					<view v-else class="message-items">
						<view 
							class="message-item follow-item" 
							v-for="(item, index) in follows" 
							:key="index"
							:class="{ unread: !item.isRead }"
						>
							<image class="user-avatar" :src="item.userAvatar" mode="aspectFill"></image>
							<view class="message-content">
								<view class="message-header">
									<view class="user-info">
										<text class="user-name">{{ item.userName }}</text>
										<text class="follow-action">关注了你</text>
									</view>
									<text class="message-time">{{ item.time }}</text>
								</view>
								<view class="user-brief">
									<text>{{ item.userBrief }}</text>
								</view>
							</view>
							<view class="follow-btn" :class="{ 'followed': item.isFollowed }" @tap.stop="toggleFollow(index)">
								<text>{{ item.isFollowed ? '已关注' : '关注' }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</page-layout>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue';
import PageLayout from '@/components/PageLayout.vue';
import useSafeArea from '@/composables/useSafeArea';

// 获取安全区域高度
const { statusBarHeight, navBarHeight, getSystemInfo } = useSafeArea();

// 计算页面高度样式变量
const styleVar = computed(() => {
	return {
		'--status-bar-height': `${statusBarHeight.value}px`,
		'--nav-bar-height': `${navBarHeight.value}px`
	};
});

// 选项卡数据
const tabs = reactive([
	{ name: '通知', unread: 2 },
	{ name: '评论', unread: 5 },
	{ name: '点赞', unread: 0 },
	{ name: '关注', unread: 3 }
]);

const currentTab = ref(0);

// 通知数据
const notifications = ref([]);
const notificationLoading = ref(false);
const hasMoreNotifications = ref(true);

// 评论数据
const comments = ref([
	{
		id: 1,
		userAvatar: '/static/avatar.jpg',
		userName: '用户1234',
		isReply: false,
		content: '这篇文章写得很好，我很喜欢！',
		postTitle: '岚迹社区的使用技巧分享',
		time: '10分钟前',
		isRead: false
	},
	{
		id: 2,
		userAvatar: '/static/avatar.jpg',
		userName: '用户5678',
		isReply: true,
		content: '谢谢分享，学到了很多！',
		postTitle: '如何在岚迹社区获得更多关注',
		time: '30分钟前',
		isRead: true
	}
]);

// 点赞数据
const likes = ref([
	{
		id: 1,
		userAvatar: '/static/avatar.jpg',
		userName: '用户2468',
		likeType: 'post',
		postTitle: '我的第一篇岚迹帖子',
		contentPreview: '这是我在岚迹社区发布的第一篇帖子...',
		contentType: 'text',
		time: '1小时前',
		isRead: false
	},
	{
		id: 2,
		userAvatar: '/static/avatar.jpg',
		userName: '用户1357',
		likeType: 'comment',
		postTitle: '关于社区规则的讨论',
		contentPreview: '我觉得规则很合理...',
		contentType: 'text',
		time: '2小时前',
		isRead: true
	},
	{
		id: 3,
		userAvatar: '/static/avatar.jpg',
		userName: '用户9876',
		likeType: 'post',
		postTitle: '分享我的旅行照片',
		contentPreview: '/static/mock-image.jpg',
		contentType: 'image',
		time: '昨天',
		isRead: true
	}
]);

// 关注数据
const follows = ref([
	{
		id: 1,
		userAvatar: '/static/avatar.jpg',
		userName: '用户3579',
		userBrief: '摄影爱好者 | 旅行达人',
		time: '3小时前',
		isFollowed: false,
		isRead: false
	},
	{
		id: 2,
		userAvatar: '/static/avatar.jpg',
		userName: '用户8642',
		userBrief: '美食博主 | 厨师',
		time: '昨天',
		isFollowed: true,
		isRead: true
	},
	{
		id: 3,
		userAvatar: '/static/avatar.jpg',
		userName: '用户1234',
		userBrief: '健身教练 | 生活方式分享',
		time: '3天前',
		isFollowed: false,
		isRead: true
	}
]);

// 切换选项卡
const switchTab = (index) => {
	currentTab.value = index;
};

// 轮播切换
const swiperChange = (e) => {
	currentTab.value = e.detail.current;
};

// 根据通知类型获取图标类名
const getIconClass = (type) => {
	switch (type) {
		case 'system':
			return 'icon-notification';
		case 'activity':
			return 'icon-activity';
		case 'announce':
			return 'icon-announce';
		default:
			return 'icon-notification';
	}
};

// 根据通知类型获取uni-icons图标类型
const getIconType = (type) => {
	switch (type) {
		case 'system':
			return 'notification';
		case 'activity':
			return 'fire';
		case 'announce':
			return 'sound';
		default:
			return 'notification';
	}
};

// 获取点赞动作文本
const getLikeActionText = (type) => {
	switch (type) {
		case 'post':
			return '赞了你的帖子';
		case 'comment':
			return '赞了你的评论';
		case 'reply':
			return '赞了你的回复';
		default:
			return '赞了你的内容';
	}
};

// 标记通知为已读
const readNotification = (item, index) => {
	if (!item.isRead) {
		item.isRead = true;
		
		// 找到所属的选项卡，减少未读数
		if (tabs[0].unread > 0) {
			tabs[0].unread--;
		}
	}
	
	// 处理通知点击逻辑
	if (item.actionUrl) {
		uni.navigateTo({
			url: item.actionUrl
		});
	} else {
		uni.showToast({
			title: '已读通知',
			icon: 'none'
		});
	}
};

// 查看评论详情
const viewCommentDetail = (item) => {
	if (!item.isRead) {
		item.isRead = true;
		
		// 减少未读数
		if (tabs[1].unread > 0) {
			tabs[1].unread--;
		}
	}
	
	uni.navigateTo({
		url: `/pages/post/detail?id=${item.postId}&comment=${item.id}`
	});
};

// 查看点赞详情
const viewLikeDetail = (item) => {
	if (!item.isRead) {
		item.isRead = true;
	}
	
	uni.navigateTo({
		url: `/pages/post/detail?id=${item.postId}`
	});
};

// 关注/取消关注
const toggleFollow = (index) => {
	follows.value[index].isFollowed = !follows.value[index].isFollowed;
	
	if (!follows.value[index].isRead) {
		follows.value[index].isRead = true;
		
		// 减少未读数
		if (tabs[3].unread > 0) {
			tabs[3].unread--;
		}
	}
	
	uni.showToast({
		title: follows.value[index].isFollowed ? '已关注' : '已取消关注',
		icon: 'none'
	});
};

// 标记全部已读
const markAllRead = () => {
	notifications.value.forEach(item => {
		item.isRead = true;
	});
	
	tabs[0].unread = 0;
	
	uni.showToast({
		title: '已全部标为已读',
		icon: 'none'
	});
};

// 加载更多通知
const loadMoreNotifications = () => {
	if (notificationLoading.value || !hasMoreNotifications.value) return;
	
	notificationLoading.value = true;
	
	// 模拟加载数据
	setTimeout(() => {
		const newNotifications = [
			{
				id: notifications.value.length + 1,
				type: 'system',
				title: '系统通知',
				content: '您的账号安全等级已提升，感谢您完善个人信息。',
				time: '10分钟前',
				isRead: false,
				actionUrl: ''
			},
			{
				id: notifications.value.length + 2,
				type: 'activity',
				title: '活动通知',
				content: '您参与的"社区创作者"活动已开始，点击查看详情。',
				time: '30分钟前',
				isRead: false,
				actionUrl: '/pages/activity/detail?id=1'
			},
			{
				id: notifications.value.length + 3,
				type: 'announce',
				title: '公告',
				content: '岚迹社区2.0版本即将上线，带来全新体验。',
				time: '1小时前',
				isRead: true,
				actionUrl: '/pages/announcement?id=1'
			}
		];
		
		notifications.value = [...notifications.value, ...newNotifications];
		notificationLoading.value = false;
		
		// 模拟没有更多数据
		if (notifications.value.length > 10) {
			hasMoreNotifications.value = false;
		}
	}, 1000);
};

// 返回上一页
const goBack = () => {
	uni.navigateBack({
		delta: 1,
		fail: () => {
			uni.switchTab({
				url: '/pages/index/index'
			});
		}
	});
};

// 页面加载
onMounted(() => {
	// 初始化一些模拟数据
	notifications.value = [
		{
			id: 1,
			type: 'system',
			title: '系统通知',
			content: '欢迎使用岚迹社区，这里有更多精彩内容等你发现！',
			time: '刚刚',
			isRead: false,
			actionUrl: ''
		},
		{
			id: 2,
			type: 'activity',
			title: '活动通知',
			content: '社区新人活动已开始，发布你的第一篇内容即可获得奖励',
			time: '5分钟前',
			isRead: false,
			actionUrl: '/pages/activity/detail?id=2'
		},
		{
			id: 3,
			type: 'announce',
			title: '社区公告',
			content: '平台规则更新，请查看最新社区守则',
			time: '10分钟前',
			isRead: true,
			actionUrl: '/pages/announcement?id=2'
		},
		{
			id: 4,
			type: 'system',
			title: '安全提醒',
			content: '您的账号刚刚在新设备上登录，如非本人操作请及时修改密码',
			time: '30分钟前',
			isRead: false,
			actionUrl: '/pages/settings/security'
		},
		{
			id: 5,
			type: 'activity',
			title: '限时活动',
			content: '春日摄影大赛开始报名，赢取丰厚奖品',
			time: '1小时前',
			isRead: true,
			actionUrl: '/pages/activity/detail?id=3'
		},
		{
			id: 6,
			type: 'system',
			title: '等级提升',
			content: '恭喜您成为岚迹社区 Lv.2 用户，解锁更多权限',
			time: '2小时前',
			isRead: false,
			actionUrl: '/pages/user/level'
		},
		{
			id: 7,
			type: 'announce',
			title: '版本更新',
			content: '岚迹社区App V2.3.0版本已发布，修复已知问题并优化用户体验',
			time: '3小时前',
			isRead: true,
			actionUrl: '/pages/announcement?id=3'
		},
		{
			id: 8,
			type: 'system',
			title: '内容推荐',
			content: '根据您的兴趣，为您推荐了3个新的创作者',
			time: '4小时前',
			isRead: false,
			actionUrl: '/pages/recommend/creators'
		},
		{
			id: 9,
			type: 'activity',
			title: '任务提醒',
			content: '您有3个每日任务尚未完成，抓紧时间完成领取奖励',
			time: '5小时前',
			isRead: true,
			actionUrl: '/pages/task/daily'
		},
		{
			id: 10,
			type: 'announce',
			title: '功能上线',
			content: '岚迹社区视频直播功能正式上线，快来体验',
			time: '6小时前',
			isRead: false,
			actionUrl: '/pages/feature/live'
		},
		{
			id: 11,
			type: 'system',
			title: '账号安全',
			content: '建议您绑定手机号增强账号安全性',
			time: '昨天',
			isRead: true,
			actionUrl: '/pages/settings/bind-phone'
		},
		{
			id: 12,
			type: 'activity',
			title: '周末活动',
			content: '线下摄影师交流会本周六举行，点击查看详情',
			time: '昨天',
			isRead: false,
			actionUrl: '/pages/activity/detail?id=4'
		},
		{
			id: 13,
			type: 'announce',
			title: '社区规则',
			content: '创作者权益保护规则更新，为原创内容保驾护航',
			time: '昨天',
			isRead: true,
			actionUrl: '/pages/announcement?id=5'
		}
	];
	
	// 初始加载通知
	loadMoreNotifications();
	
	// 确保安全区域高度正确计算
	getSystemInfo();
});
</script>

<style lang="scss">
page {
	background-color: #f5f7fa;
	height: 100%;
}

.container {
	display: flex;
	flex-direction: column;
	height: 100%;
}

:deep(.page-content-container) {
	display: flex;
	flex-direction: column;
	height: 100vh;
}

/* 选项卡 */
.tabs {
	display: flex;
	height: 100rpx;
	background: #fff;
	position: sticky;
	top: var(--status-bar-height);
	left: 0;
	width: 100%;
	z-index: 10;
}

.tab-item {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.tab-text {
	font-size: 28rpx;
	color: #666;
	padding-bottom: 10rpx;
	border-bottom: 6rpx solid transparent;
	transition: all 0.3s;
}

.tab-item.active .tab-text {
	color: #6e8efb;
	border-bottom-color: #6e8efb;
	font-weight: 500;
}

.badge {
	position: absolute;
	top: 20rpx;
	margin-left: 100rpx;
	min-width: 36rpx;
	height: 36rpx;
	padding: 0 8rpx;
	background: #ff4d4f;
	border-radius: 18rpx;
	font-size: 22rpx;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 消息列表区域 */
.message-swiper {
	flex: 1;
	height: calc(100vh - var(--status-bar-height) - var(--nav-bar-height) - 100rpx);
	width: 100%;
}

.message-list {
	height: 100%;
	background: #f5f7fa;
	width: 100%;
	box-sizing: border-box;
}

/* 确保滚动区域内容可见 */
:deep(swiper-item), :deep(.uni-swiper-item) {
	height: 100%;
	overflow: visible;
}

.top-actions {
	display: flex;
	justify-content: flex-start;
	padding: 20rpx 30rpx;
	background: #fff;
	border-bottom: 1rpx solid #ebedf0;
}

.mark-read {
	font-size: 26rpx;
	color: #6e8efb;
	padding: 6rpx 0;
}

.empty-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 200rpx 0;
	
	image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
	}
	
	text {
		font-size: 28rpx;
		color: #999;
	}
}

.message-items {
	padding-bottom: 50rpx;
}

.message-item {
	display: flex;
	background: #fff;
	padding: 30rpx;
	margin-bottom: 2rpx;
	position: relative;
	
	&:last-child {
		margin-bottom: 0;
	}
	
	&.unread:before {
		content: '';
		position: absolute;
		left: 15rpx;
		top: 40rpx;
		width: 14rpx;
		height: 14rpx;
		background: #ff4d4f;
		border-radius: 50%;
	}
}

/* 通知消息 */
.notification-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 20rpx;
}

.message-content {
	flex: 1;
}

.message-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10rpx;
}

.message-title {
	font-size: 30rpx;
	font-weight: 500;
	color: #333;
}

.message-time {
	font-size: 24rpx;
	color: #999;
}

.message-text {
	font-size: 26rpx;
	color: #666;
	line-height: 1.5;
}

/* 评论消息 */
.user-avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	margin-right: 20rpx;
}

.user-info {
	display: flex;
	align-items: center;
}

.user-name {
	font-size: 28rpx;
	font-weight: 500;
	color: #333;
	margin-right: 10rpx;
}

.comment-action,
.like-action,
.follow-action {
	font-size: 26rpx;
	color: #666;
}

.comment-text {
	font-size: 26rpx;
	color: #333;
	line-height: 1.5;
	margin-bottom: 16rpx;
}

.post-preview {
	background: #f5f7fa;
	padding: 16rpx;
	border-radius: 8rpx;
}

.post-title {
	font-size: 26rpx;
	color: #666;
}

/* 点赞消息 */
.content-preview {
	width: 100rpx;
	height: 100rpx;
	margin-left: 20rpx;
	background: #f5f7fa;
	border-radius: 8rpx;
	overflow: hidden;
}

.preview-image {
	width: 100%;
	height: 100%;
}

.preview-text {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	font-size: 24rpx;
	color: #999;
	padding: 10rpx;
	text-align: center;
}

/* 关注消息 */
.user-brief {
	font-size: 26rpx;
	color: #999;
	margin-bottom: 10rpx;
}

.follow-btn {
	min-width: 120rpx;
	height: 56rpx;
	background: #6e8efb;
	color: #fff;
	font-size: 26rpx;
	padding: 0 20rpx;
	border-radius: 28rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	
	&.followed {
		background: #f0f2f5;
		color: #666;
	}
}

.list-footer {
	text-align: center;
	padding: 30rpx 0;
	font-size: 26rpx;
	color: #999;
}
</style> 